<template>
    <view>
        <u-navbar :border-bottom="false">
            <view class="search-input"
                ><u-search
                    v-model="keyword"
                    height="72"
                    placeholder="搜索商品"
                    @search="onSearch"
                    @custom="onSearch"
                ></u-search
            ></view>
        </u-navbar>
        <view class="search-wrapper">
            <view class="search-view">
                <view class="title u-flex">
                    <u-image
                        width="24rpx"
                        height="32rpx"
                        src="@/static/images/search_hot.png"
                    ></u-image>
                    <text class="name">热门搜索</text>
                </view>
                <view class="list u-flex u-flex-wrap">
                    <view
                        class="label"
                        v-for="(item, index) in hotList"
                        :key="index"
                    >
                        <view class="name" @click="handleHotClick(item)">{{
                            item
                        }}</view>
                    </view>
                </view>
            </view>

            <view class="search-view">
                <view class="title u-flex u-row-between">
                    <text class="name">历史搜索</text>
                    <text class="empty" @click="handleEmptyHistory">清空</text>
                </view>
                <view class="list u-flex u-flex-wrap">
                    <view
                        class="label"
                        v-for="(item, index) in courseSearchHistoryRecordList"
                        :key="index"
                    >
                        <view class="name" @click="handleHotClick(item)">{{
                            item
                        }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState } from "vuex";
export default {
    data() {
        return {
            keyword: "",
            hotList: [],
        };
    },
    computed: {
        ...mapState({
            courseSearchHistoryRecordList: (state) =>
                state.mall.searchHistoryRecord,
        }),
    },
    onLoad() {
        this.$edu.api.getMallProductHotsearch().then((res) => {
            const { data } = res;
            this.hotList = data;
        });
    },
    methods: {
        handleHotClick(val) {
            this.$u.route("pageFound/mall/results", {
                title: val,
            });
            this.addHistory(val);
        },
        onSearch() {
            this.$u.route("pageFound/mall/results", {
                title: this.keyword,
            });
            this.addHistory(this.keyword);
        },
        // 添加搜索历史记录
        addHistory(val) {
            let list = this.courseSearchHistoryRecordList;
            let some = list.some((item) => item == val);
            if (val && !some) {
                list.unshift(val);
                this.$store.commit("mall/setSearchHistoryRecord", list);
            }
        },
        // 清空历史
        handleEmptyHistory() {
            this.$store.commit("mall/setSearchHistoryRecord", []);
        },
    },
};
</script>
<style lang="scss" scoped>
.search-input {
    width: 100%;
    padding-right: 20rpx;
}
.search-wrapper {
    padding: 40rpx 30rpx 0;
    min-height: calc(100vh - 44px);
    background-color: #fff;
    .search-view {
        margin-bottom: 20rpx;
        .title {
            margin-bottom: 33rpx;
            .name {
                font-size: 28rpx;
                font-weight: 500;
                color: $edu-main-color;
            }
            .empty {
                font-size: 28rpx;
                font-weight: 400;
                color: $edu-tips-color;
            }
            .u-image {
                margin-right: 14rpx;
            }
        }
        .list {
            margin: 0 -14rpx;
            .label {
                padding: 0 14rpx;
                margin-bottom: 40rpx;
                .name {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0 22rpx;
                    height: 64rpx;
                    background: #f7f7f7;
                    border-radius: 32px;
                }
            }
        }
    }
}
</style>
